<template>
	<view class="feixingqi">
		<u-modal v-model="show" title="温馨提示" :content="content"></u-modal>
		<view class="box_list">
			<view v-for="(item,index) in list" :key="index"
				:class="item.show?'box_list_item':'box_list_item item_none'">
				{{item.label}}
			</view>
			<image class="img_man img_box img" src="@/static/txn.jpeg" alt=""
				:style="{top:this.manImg[1]+'%',left:this.manImg[0]+'%'}" />
			<image class="img_man img_box img" src="@/static/txw.jpeg" alt=""
				:style="{top:this.womanImg[1]+'%',left:this.womanImg[0]+'%'}" />
			<image class=" img img_touzi" src="@/static/touzi1.gif" alt="" @click="handleStart" />
		</view>
	</view>
</template>

<script>
	import qipan_list_data from '@/utils/data/qipan_list.js'
	export default {
		data() {
			return {
				show: false,
				content: '情侣飞行棋',
				manImg: [84, 1.5],
				womanImg: [84, 1.5],
				list: [],
				isWoMan: false,
				isEnd: false,
				isStart: false,
			}
		},
		onLoad() {
			console.log(qipan_list_data)
			this.list = qipan_list_data

		},
		methods: {
		 handleStart() {
				//调整筛子的性别
				this.isWoMan = !this.isWoMan
			    this.start(this.isWoMan)
			},
			start(isWoMan) {
				if (this.isEnd) return //游戏结束
				//开始动画
					let mathNum = Math.floor(Math.random() * 6 + 1)
					// let mathNum = 1
					let x = isWoMan ? this.manImg[0] : this.womanImg[0]
					let y = isWoMan ? this.manImg[1] : this.womanImg[1]
					console.log([x, y], isWoMan)
					// x=x+16.5
					// y=y+9.9、
					//从右往下
					if (x > 80 && y < 90) {
						let downMove = setInterval(() => {
							y += 9.9
							mathNum--
							if (mathNum == 0) {
								//根据数字停止骰子
								clearInterval(downMove)
							}
							console.log([x, y], isWoMan)
							if (isWoMan) {
								console.log('赋值man')
								this.manImg = [x, y]
							} else {
								console.log('赋值woman')
								this.womanImg = [x, y]
							}

							if (y > 90) {
								console.log('进入')
								clearInterval(downMove)

								//判断当前筛子是不是为0,非0往左走
								if (mathNum !== 0) {
									let leftMove = setInterval(() => {
										x -= 16.5
										mathNum--
										if (isWoMan) {
											this.manImg = [x, y]
										} else {
											this.womanImg = [x, y]
										}
										// this.manImg = [x, y]
										if (mathNum == 0) {
											//根据数字停止骰子
											clearInterval(leftMove)
										}
									}, 200)
								}
							}
						}, 200)
						resolve(true)
					} else if (x > 10 && y > 90) {
						//从右下往右左走
						let downLeftMove = setInterval(() => {
							x -= 16.5
							mathNum--
							if (mathNum == 0) {
								//根据数字停止骰子
								clearInterval(downLeftMove)
							}
							if (isWoMan) {
								this.manImg = [x, y]
							} else {
								this.womanImg = [x, y]
							}
							if (x < 10) {
								clearInterval(downLeftMove)
								//判断当前筛子是不是为0,非0往左上走
								if (mathNum !== 0) {
									let leftUpMove = setInterval(() => {
										y -= 9.9
										mathNum--
										if (isWoMan) {
											this.manImg = [x, y]
										} else {
											this.womanImg = [x, y]
										}
										if (mathNum == 0) {
											//根据数字停止骰子
											clearInterval(leftUpMove)
										}
									}, 200)
								}
							}
						}, 200)
						resolve(true)
					} else if (x < 10 && y > 10) {
						//点击的时候判断x位置,左下往左上
						let upMove = setInterval(() => {
							y -= 9.9
							mathNum--
							if (mathNum == 0) {
								//根据数字停止骰子
								clearInterval(upMove)
							}
							if (isWoMan) {
								this.manImg = [x, y]
							} else {
								this.womanImg = [x, y]
							}
							if (y < 10) {
								//到顶
								clearInterval(upMove)
								//判断当前筛子是不是为0,非0往右上走
								if (mathNum !== 0) {
									let rightMove = setInterval(() => {
										x += 16.5
										mathNum--
										if (isWoMan) {
											this.manImg = [x, y]
										} else {
											this.womanImg = [x, y]
										}
										if (mathNum == 0) {
											//根据数字停止骰子
											clearInterval(rightMove)
										}
									}, 200)
								}
							}
						}, 200)
					} else if ((x > 10 && y < 10) || (x < 10 && x < 10)) {
						let rightMove = setInterval(() => {
							x += 16.5
							mathNum--
							if (mathNum == 0) {
								//根据数字停止骰子
								clearInterval(rightMove)
							}
							if (isWoMan) {
								this.manImg = [x, y]
							} else {
								this.womanImg = [x, y]
							}
							if (x > 80) {
								//到达终点了
								this.show = true;
								this.content = '恭喜你获得胜利!!'
								clearInterval(rightMove)
							}
						}, 200)
					}


			}
		}
	}
</script>

<style lang="scss" scoped>
	.feixingqi {
		padding: 30rpx;
		text-align: center;
	}

	.box_list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		position: relative;

		&_item {
			width: calc(100vw /8);
			height: calc(100vh / 14);
			background-color: #fcbfa8;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;
			color: #fff;
		}
	}

	.item_none {
		opacity: 0;
	}

	.img {
		width: 80rpx;
		height: 80rpx;
	}

	.img_touzi {
		margin: auto auto;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.img_box {
		border-radius: 50%;
		position: absolute;
		left: 13rpx;
		top: 13rpx;


	}
</style>